<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        span {
            font-size: 2em;
        }

        #container {
            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-rows: 50px 50px 50px;
        }

        #container2 {
            display: grid;
            /* grid-template-columns: 25% 25% 25% 25%;
            grid-template-rows: 33.3% 33.3% 33.3%; */
            /* ↓↓↓↓↓↓↓↓↓↓↓↓↓ repeat接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。 ↓↓↓↓↓↓↓↓↓↓↓↓↓*/
            grid-template-columns: repeat(4, 25%);
            grid-template-rows: repeat(3, 33.33%);
            height: 300px;
            width: 50%;
            border: 1px solid red;
        }

        #container3 {
            display: grid;
            grid-template-columns: repeat(auto-fill, 50px);
            width: 400px;
            border: 1px solid red;
        }

        #container4 {
            display: grid;
            grid-template-columns: 150px 1fr 3fr;
            width: 300px;
        }

        #container5 {
            display: grid;
            grid-template-columns: 50px auto 50px;
            width: 300px;
        }

        #container6 {
            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-rows: 50px 50px 50px;
            /* grid-row-gap: 10px;
            grid-column-gap: 10px; */
            /* ↓↓↓↓↓↓↓ */
            grid-gap: 10px 10px;
        }

        #container7 {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            /* width: 400px; */
            border: 1px solid red;
            grid-gap: 10px 10px;

        }

        .item {
            font-size: 2em;
            text-align: center;
            border: 1px solid #e5e4e9;
        }

        .item-1 {
            background-color: #ef342a;
        }

        .item-2 {
            background-color: #f68f26;
        }

        .item-3 {
            background-color: #4ba946;
        }

        .item-4 {
            background-color: #0376c2;
        }

        .item-5 {
            background-color: #c077af;
        }

        .item-6 {
            background-color: #f8d29d;
        }

        .item-7 {
            background-color: #b5a87f;
        }

        .item-8 {
            background-color: #d0e4a9;
        }

        .item-9 {
            background-color: #4dc7ec;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-9">10</div>
        <div class="item item-9">11</div>
        <div class="item item-9">12</div>
    </div>
    <div id="container2">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-9">10</div>
        <div class="item item-9">11</div>
        <div class="item item-9">12</div>
    </div>
    <div id="container3">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-9">10</div>
        <div class="item item-9">11</div>
        <div class="item item-9">12</div>
    </div>
    <div id="container4">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-9">10</div>
        <div class="item item-9">11</div>
        <div class="item item-9">12</div>
    </div>
    <div id="container5">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-9">10</div>
        <div class="item item-9">11</div>
        <div class="item item-9">12</div>
    </div>
    <div id="container6">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-9">10</div>
        <div class="item item-9">11</div>
        <div class="item item-9">12</div>
    </div>
    <div id="container7">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-9">10</div>
        <div class="item item-9">11</div>
        <div class="item item-9">12</div>
    </div>
</body>

</html>